<template>
  <div>
    <!-- <h2 v-wang="123">
        自定义指令
    </h2> -->

    <div>
        <input v-wang="val" v-model="val" type="text" />
        <ul>
            <li>
                1111111111111 -- <button v-copy="1111111111111">复制</button>
            </li>

            <li>
                2222222222222 -- <button v-copy="2222222222222">复制</button>
            </li>

            <li>
                3333333333333 -- <button v-copy="3333333333333">复制</button>
            </li>
        </ul>
    </div>
    <!-- <Abc/> -->
  </div>
</template>

<script>
export default {
    name: "directives-com",
    data() {
        return {
            val: "",
            vNode: {
                tagName: "input",
                value: ""
            }
        }
    },
    directives: {
        // 简单写法，自动执行一次
        // wang(el){
        //     // el 当前绑定元素
        //     // 第二个参数 当前指令的信息
        //     // VNode
        //     el.focus()
        // }
        copy: {
            inserted(el, { value }) {
                // 1. 动态添加事件
                el.addEventListener("click", () => {
                    console.log('我准备点击了')
                    // 2. 动态创建一个文本域
                    const text = document.createElement('textarea')
                    text.value = value
                    document.body.appendChild(text)
                    // 3. 选中文本域中的内容
                    text.select()
                    // 4. 复制选中的内容
                    const result = document.execCommand('Copy')
                    if (result) {
                        console.log('复制成功')
                    }
                    // 5. 把textarea给藏起来
                    text.style.position = "absolute"
                    text.style.left = '9999px'
                    // 6. 删除
                    document.body.removeChild(text)
                })
                
            }
        },

        wang: {
            bind() {
                // 只调用一次， 指令第一次绑定到元素上时调用
                // console.log('执行到了bind')
                // el.focus()
            },
            inserted() {
                // 被绑定的元素插入到父节点时调用
                // console.log('执行到了inserted')
                // el.focus()
            },
            update(el, { value }){
                // 所在组件的VNode更新时调用
                // console.log(el, )
                    // console.log(this)
                    // this.val = value
                    // document.body.removeChild
                    const text = document.getElementById('formText')
                    const p = document.createElement('P')
                    p.id = "formText"
                    
                    if (value.length !== 11) {
                        if (!text) {
                            p.innerHTML = "请输入正确的手机号"
                            p.style.color = "red"
                            document.body.appendChild(p)
                        }
                    } else {
                        document.body.removeChild(text)
                    }       
            },
            componentUpdated() {
                // 指令所在的VNode及子组件的VNode全部更新时调用
                // console.log('我更新了componentUpdated')
            },
            unbind() {
                // 指令与当前组件解绑
                console.log('执行到了销毁')
            }
        }
    }
}
</script>

<style>

</style>